<template>
  <el-popover placement="top-start" width="200" trigger="click">
    <template #reference>
      <div class="el-input sea-searchbar el-input-group--append">
        <input class="el-input__wrapper el-input__inner" type="text" autocomplete="off"
               v-model="keyword" @input="onInput" style="width: 160px"
               tabindex="0" placeholder="关键字" id="el-id-1481-3">
        <div class="el-input-group__append">
          <i class="fa fa-fw fa-search"></i>
        </div>
      </div>
    </template>
    <el-tree ref="treeRef" default-expand-all :data="tree" @node-click="()=>{}"
             :filter-node-method="filterNode"></el-tree>
  </el-popover>
</template>

<script setup>
import Bamboo from "@/lang/bamboo/index";
import Layers from "@/lang/layers/index";
import {ref} from "vue";
import {mapper_default} from "@/lang/bamboo/index";

/**
 * 便捷搜索栏
 *
 * 有些时候，为了尽可能展示更多的数据，会取消侧滑导航和顶部导航，
 * 这时候，当前组件会非常实用，
 *
 * 当前组件包含一个模糊搜索栏，悬浮的时候展示菜单列表。
 */
let list = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '三级 1-1-2'}
    , {id: 11, label: '一级 2'}
];

// 树形工具
const builder = Bamboo.builder();
// 根节点
const keyword = ref('');

// default list
let def;
if (Layers.isNotEmpty(list)) {
    def = builder
        .setMapper(mapper_default).setParents(list)
        .groupBy().getRoot();
} else {
    def = [];
}
const tree = ref(def);

// Reference
const treeRef = ref()

const onInput = (evt) => {
    treeRef.value.filter(evt.target.value)
}

const filterNode = (value, data) => {
    if (!value) return true
    return data.label.includes(value)
}

</script>

<style scoped>

</style>